import React from 'react';
import ReactDOM from 'react-dom';
import { PlusOutlined } from '@ant-design/icons';

const ERUploadModal = ({ visible, onClose, onUpload, erPreview, onConfirm }) => {
  if (!visible) return null;
  
  const modalRoot = document.getElementById('modal-root');

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      onUpload(file);
    }
  };

  return ReactDOM.createPortal(
    <div className="modal-backdrop">
      <div className="modal-content" style={{ 
        maxHeight: '85vh', // 限制最大高度
        display: 'flex',
        flexDirection: 'column'
      }}>
        <div className="modal-header">
          <h3>添加ER模型</h3>
          <button className="close-btn" onClick={onClose}>×</button>
        </div>
        
        {/* 添加可滚动区域 */}
        <div className="modal-body" style={{ 
          flex: 1, 
          overflowY: 'auto',
          padding: '20px'
        }}>
          <div className="upload-options">
            <label className="upload-btn">
              <input type="file" accept=".sql,.er,.json" onChange={handleFileChange} />
              <PlusOutlined style={{ fontSize: '32px', marginBottom: '8px' }} />
              <span>点击或拖拽文件到此处上传</span>
              <p className="upload-hint">支持 .sql, .er, .json 格式</p>
            </label>
            
            <div className="or-divider">或</div>
            
            <div className="direct-input">
              <input 
                type="text" 
                placeholder="直接输入表名" 
                className="table-name-input"
              />
              <button className="btn-primary">确认</button>
            </div>
          </div>
          
          {erPreview && (
            <div className="er-preview">
              <h4>ER模型预览</h4>
              <div className="preview-content">
                {erPreview.content}
              </div>
            </div>
          )}
        </div>
        
        {/* 底部按钮区域固定 */}
        <div className="modal-footer" style={{ 
          position: 'sticky',
          bottom: 0,
          background: 'white',
          padding: '15px 24px',
          borderTop: '1px solid var(--border-color)',
          zIndex: 1
        }}>
          <button className="btn-outline" onClick={onClose}>取消</button>
          <button className="btn-primary" onClick={onConfirm}>确认添加</button>
        </div>
      </div>
    </div>,
    modalRoot
  );
};

export default ERUploadModal;